// 1. React核心库
import React, { useState, useEffect } from 'react';

// 2. UI组件库 - 按字母顺序
import { Card, Descriptions, Button, message, Tag } from 'antd';

// 3. 图标库
import { EditOutlined, ArrowLeftOutlined } from '@ant-design/icons';

// 4. 专业组件库
import { PageContainer } from '@ant-design/pro-components';

// 5. 工具库
import { useParams } from '@umijs/max';
import dayjs from 'dayjs';

// 7. 项目内部模块
import { apiClients } from '@/services/apiClient';
import { autoLoginInDev } from '@/utils/autoLogin';

// 8. 生成的类型定义 (必须使用，禁止手工定义)
import type { AIModel } from '@/services/generated';

const AIModelDetail: React.FC = () => {
  const { id } = useParams<{ id: string }>();
  const [data, setData] = useState<AIModel | null>(null);
  const [loading, setLoading] = useState(false);

  useEffect(() => {
    const fetchData = async () => {
      try {
        setLoading(true);
        await autoLoginInDev();
        const response = await apiClients.aiChat.aiChatModelsRetrieve({ id: id! });
        setData(response.data);
      } catch (error) {
        message.error('获取模型详情失败');
      } finally {
        setLoading(false);
      }
    };
    if (id) fetchData();
  }, [id]);

  return (
    <PageContainer
      loading={loading}
      header={{
        title: 'AI模型详情',
        subTitle: data?.name || '加载中...',
      }}
    >
      <Card>
        <Descriptions column={2} bordered>
          <Descriptions.Item label="ID">{data?.id}</Descriptions.Item>
          <Descriptions.Item label="模型名称">{data?.name}</Descriptions.Item>
          <Descriptions.Item label="模型代码">{data?.model_code}</Descriptions.Item>
          <Descriptions.Item label="提供商">
            <Tag color="blue">{data?.provider_name || '未设置'}</Tag>
          </Descriptions.Item>
          <Descriptions.Item label="状态">
            <Tag color={data?.is_active ? 'green' : 'red'}>
              {data?.is_active ? '启用' : '禁用'}
            </Tag>
          </Descriptions.Item>
          <Descriptions.Item label="最大Token">
            <Tag color="purple">{data?.max_tokens?.toLocaleString() || 0}</Tag>
          </Descriptions.Item>
          <Descriptions.Item label="每1k Token成本">
            ${Number(data?.cost_per_1k_tokens || 0).toFixed(6)}
          </Descriptions.Item>
          <Descriptions.Item label="模型参数">
            {data?.model_params ? (
              <pre style={{ background: '#f5f5f5', padding: '8px', borderRadius: '4px' }}>
                {JSON.stringify(data.model_params, null, 2)}
              </pre>
            ) : (
              '无'
            )}
          </Descriptions.Item>
          <Descriptions.Item label="创建时间">
            {data?.created_at ? dayjs(data.created_at).format('YYYY-MM-DD HH:mm:ss') : '-'}
          </Descriptions.Item>
          <Descriptions.Item label="更新时间">
            {data?.updated_at ? dayjs(data.updated_at).format('YYYY-MM-DD HH:mm:ss') : '-'}
          </Descriptions.Item>
        </Descriptions>
        
        <div style={{ marginTop: 16 }}>
          <Button 
            type="primary" 
            icon={<EditOutlined />}
            href={`/ai-chat/models/edit/${id}`}
            style={{ marginRight: 8 }}
          >
            编辑
          </Button>
          <Button 
            icon={<ArrowLeftOutlined />}
            href="/ai-chat/models"
          >
            返回列表
          </Button>
        </div>
      </Card>
    </PageContainer>
  );
};

export default AIModelDetail;